<template>
    <div class='w-vw h-vh'>
        <div :class='$style.container'>
            <div :class='$style.loginText'>登录</div>
            <div :class='$style.modal'>
                <div :class='[$style.errorTips, {[$style.show] : error.show}]'>
                    <el-alert :closable='false' :title='error.msg' type='error' show-icon> </el-alert>
                </div>
                <el-form label-position='top'>
                    <el-form-item>
                        <el-input type='text' placeholder='商户名称' v-model='formData.merchant' />
                    </el-form-item>
                    <el-form-item>
                        <el-input type='text' placeholder='登录账号' v-model='formData.account' />
                    </el-form-item>
                    <el-form-item>
                        <el-input type='password' placeholder='登录密码' v-model='formData.password' />
                    </el-form-item>
                    <el-form-item>
                        <el-button class='w-100' type='primary' :loading='loading' @click='login'>登 录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script lang='ts' setup>
    import { reactive, ref } from 'vue'
    import { useRouter } from 'vue-router'
    import { useStore } from 'vuex'
    import { loginApi } from '../../api/login'
    const $store = useStore()

    const error = reactive({
        msg : '',
        show : false
    })

    const loading = ref(false)

    const formData = reactive({
        merchant : '',
        account : '',
        password : ''
    })

    const $router = useRouter()


    async function login() {
        if(formData.merchant === '') {
            error.msg = '请输入商户名'
            error.show = true
            return
        }

        if(formData.account === '') {
            error.msg = '请输入登录账号'
            error.show = true
            return
        }
        if(formData.password === '') {
            error.msg = '请输入登录密码'
            error.show = true
            return
        }

        error.show = false
        loading.value = true
        const res = await loginApi(formData)
        loading.value = false
        if(res.success) {
            $store.dispatch('login/login', res.data).then(() => {
                $router.replace('/')
            })
        }else {
            error.msg = res.msg
            error.show = true
        }
        
    }

</script>

<style scoped module lang='scss' src='./index.scss'></style>